<template>
  <el-card class="container" :body-style="{ pading: 0 }">
    <el-calendar class="calendar" v-model="currentData"></el-calendar>
  </el-card>
</template>

<script   setup>
import { ref } from "vue";
const currentData = ref(null);
</script>
    
    
<style lang="scss" scoped>
.container {
  height: 443px;

  .calendar {
    ::v-deep .el-calendar__body {
      padding: 0 12px 12px;
      font-size: 14px;
    }

    ::v-deep .el-calendar-day {
      height: 66px !important;
      padding: 0 !important;

      p {
        height: 100%;
        padding: 8px;
      }

      // 金额样式
      .amount {
        font-size: 12px;
      }

      // 正收益
      .profit {
        background-color: #f3fff3;

        span {
          color: #649840;
        }
      }

      // 负收益
      .loss {
        background-color: #ffe7e7;

        span {
          color: #b65d59;
        }
      }

      .is-selected {
        background-color: #d6f2ff;
      }
    }
  }
}</style>